<script>
export default {
  name: "ta-dialog",
  render(clearElement) {
    let { open, width, title, icon, showClose } = this.$props;
    let slot = [];
    if (this.$slots?.default) {
      slot = this.$slots.default;
    }
    if (open) {
      let iconElmenet = null;
      let closeIconElement = null;
      if (icon) {
        iconElmenet = clearElement("i", {
          class: ["overall-icon", icon, "dialog-header-icon"],
        })
      }
      if (showClose) {
        let closeIconClass = "icon-guanbi1";
        closeIconElement = clearElement("i", {
          class: [closeIconClass, "overall-icon", "dialog-header-close-icon"],
          on: {
            click: this.syncClose.bind(this),
          },
        });
      }
      return clearElement(
        "dialog",
        {
          class: "page-dialog-modal dialog-modal-animation",
          domProps: {
            open,
          },
          on: {
            click: this.clickModal.bind(this),
          },
        },
        [
          clearElement(
            "div",
            {
              class: "page-dialog-main dialog-main-animation",
              style: { width },
              on: { click: this.clickMain.bind(this) },
            },
            [
              clearElement(
                "div",
                { class: "page-dialog-header overall-flex" },
                [
                  iconElmenet,
                  clearElement("span", { class: "dialog-header-title" }, title),
                  closeIconElement,
                ]
              ),
              clearElement("div", { class: "page-dialog-content" }, slot),
            ]
          ),
        ]
      );
    } else {
      return null;
    }
  },
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    modal: {
      // 遮罩
      type: Boolean,
      default: true,
    },
    "modal-append-to-body": {
      // 遮罩层是否插入至 body 元素上
      type: Boolean,
      default: false,
    },
    "close-on-click-modal": {
      type: Boolean,
      default: true,
    },
    "close-on-press-escape": {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "70%",
    },
    title: {
      type: String,
      default: "",
    },
    icon: {
      type: String,
      default: "",
    },
    showClose: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    clickMain(e) {
      e.stopPropagation();
    },
    clickModal() {
      if (this.closeOnClickModal) {
        this.syncClose();
      }
    },
    syncClose() {
      this.$emit("update:open", false);
    },
    openEvent() {
      this.$emit("open");
    },
  },
  mounted() {
    this.openEvent();
  },
};
</script>
<style scoped lang="scss">
.dialog-modal-animation {
  animation: modal-one 200ms linear forwards;
}
.dialog-main-animation {
  animation: dialog-main 200ms linear forwards;
}

.page-dialog-modal {
  width: 100%;
  height: 100%;
  padding: $modalPadding;
  background: $modalBackground;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: $dialogModalIndex;
  border: none;
  outline: none;
  overflow-y: auto;
  box-sizing: border-box;
}

.page-dialog-main {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: $dialogMainBackground;
  border-radius: $dialogMainBorderRadius;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: $dialogMainBoxShadow;
  z-index: $dialogModalMainIndex;
}

.header-sticky .page-dialog-modal{
    padding: 100px;
}

.page-dialog-header {
  width: 100%;
  height: 55px;
  border-bottom: 1px solid #c3c3c344;
  background: white;
  align-items: center;
  padding: 0px 16px;
  box-sizing: border-box;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
}

.dialog-header-title {
  flex: 1;
  font-size: 1.2rem;
}
.dialog-header-close-icon,
.dialog-header-icon {
  font-size: 1.2rem;
}

.dialog-header-icon {
  font-size: 1.5rem;
  margin-right: 10px;
}
.dialog-header-close-icon {
  transition: transform 180ms linear;
}
.dialog-header-close-icon:hover {
  transform: rotate(90deg);
}
.dialog-header-close-icon:active {
  color: orangered;
}

.page-dialog-content:empty {
  padding: 0px;
}
.page-dialog-content {
  width: 100%;
  background: white;
  padding: 15px;
  box-sizing: border-box;
}
</style>
